<template>
	<view>
		<uni-nav-bar title="详细资料" :statusBar="true" :border="false" left-icon="back" :fixed="true"
			@clickLeft="$tab.back()" @clickRight="$tab.nav(`/pages/chat2/userSet?userId=${userId}`)">
			<block slot="right" v-if="detail && detail.userInfo.deptId != 110 && userId != 5864  && userId != 299  && userId != 5891">
				<u-icon name="more-dot-fill" color="#161A0C"></u-icon>
			</block>
		</uni-nav-bar>

		<view class="px-20 py-28 bg-FFF mt-16" v-if="detail">
			<view class="flex items-center">
				<image :src="detail.userInfo.avatar" class="image-96" mode=""
					@click="$modal.seeBigImage([detail.userInfo.avatar],0)"></image>
				<view class="ml-24">
					<view class="text-32 text-161A0C">
						{{detail.groupName}}
					</view>
					<view class="text-24 text-gray mt-8">
						用户名：{{detail.userInfo.userName}}
					</view>
				</view>
			</view>

			<view class="" style="margin-top: 112rpx;"
				@click="$tab.nav(`/pages/chat2/notes?userId=${detail.userInfo.userId}&notes=${detail.groupName}&type=1`)">
				<view class="flex items-center justify-between">
					<view class="text-32">
						备注昵称
					</view>
					<u-icon name="arrow-right" color="#333" :bold="true"></u-icon>
				</view>
				<view class="mt-40">
					<u-line color="#EAEAEA"></u-line>
				</view>
			</view>
			<!-- 	<view class="mt-40">
				<view class="flex items-center justify-between">
					<view class="">
						消息免打扰
					</view>
					<u-switch v-model="detail.noDisturb" activeColor="#3998FB" inactiveColor="#F8F8F8" :activeValue="1" :inactiveValue="0" :asyncChange="true" @change="noDisturbChange"></u-switch>
				</view>
				<view class="mt-40">
					<u-line color="#EAEAEA"></u-line>
				</view>
			</view> -->
			<view class="mt-40">
				<view class="flex items-center justify-between">
					<view class="text-32">
						置顶聊天
					</view>
					<u-switch v-model="detail.isTop" activeColor="#FF323B" inactiveColor="#F8F8F8" :activeValue="1"
						:inactiveValue="0" :asyncChange="true" @change="isTopChange"></u-switch>
				</view>
			<!-- 	<view class="mt-24">
					<u-line color="#EAEAEA"></u-line>
				</view> -->
			</view>
		</view>

		<view class="px-20 py-36 bg-FFF mt-16">
			<!-- 			<view class="">
				<view class="flex items-center justify-between">
					<view class="">
						查找聊天记录
					</view>
					<u-icon name="arrow-right" color="#333" :bold="true"></u-icon>
				</view>
				<view class="mt-40">
					<u-line color="#EAEAEA"></u-line>
				</view>
			</view> -->
			<view class="">
				<view class="flex items-center justify-between" @click="clearChat">
					<view class="text-32">
						清空聊天记录
					</view>
					<u-icon name="arrow-right" color="#333" :bold="true"></u-icon>
				</view>
				<view class="mt-40">
					<u-line color="#EAEAEA"></u-line>
				</view>
			</view>
			<view class="mt-40">
				<view class="flex items-center justify-between" @click="$tab.nav(`/pages/chat2/chatDetail?id=${userId}&type=1`)">
					<view class="">
						投诉
					</view>
					<u-icon name="arrow-right" color="#333" :bold="true"></u-icon>
				</view>
			</view>
		</view>

		<view class="px-20 py-36 bg-FFF mt-16">
			<view class="flex justify-around"
				@click="$tab.nav(`/pages/chat2/chatIndex?groupId=${detail.groupId}&title=${detail.groupName}&isGroup=${0}&id=${userId}`)">
				<view class="flex items-center">
					<image src="https://file.fulewanjia.com/fulewanjia/profile/chatImgs/icon_faxiaoxi.png" class="image-48"
						mode=""></image>
					<view class="font-500 ml-16 text-36" style="color: #FF323B;">
						发送消息
					</view>
				</view>
			</view>
			<!-- 	<u-divider></u-divider>
			<view class="flex justify-around">
				<view class="flex items-center">
					<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/icon_yinshipin@2x.png" class="image-48" mode=""></image>
					<view class="font-500 ml-16">
						音视频通话
					</view>
				</view>
			</view> -->
		</view>

	<!-- 	<view class="mt-40 flex justify-around">
			<view class="flex items-center" @click="$modal.throttle(delFriend(),2000)">
				<image src="http://api.fceos.cn/qiliaoyun/profile/appImages/icon_shanchu@2x.png" class="image-40"
					mode=""></image>
				<view class="text-F40600 ml-16">
					删除联系人
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: null,
				detail: null,
			};
		},
		onLoad(e) {
			console.log(e.userId)
			this.userId = e.userId
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			delFriend() {
				this.$modal.confirm('确认删除好友和所有记录吗?').then(async con => {
					if (con) {
						const res = await this.$Api.chat.delFriend(this.userId)
						this.$modal.msg('删除成功!')
						this.$tab.back(1500)
					}
				})
			},
			async getDetail() {
				const res = await this.$Api.chat.userDetail(this.userId)
				this.detail = res.data
			},
			async isTopChange(e) {
				const res = await this.$Api.chat.chatTop({
					groupId: this.detail.groupId,
					isTop: e
				})
				this.getDetail()
			},
			async noDisturbChange(e) {
				const res = await this.$Api.chat.chatNoDisturb({
					groupId: this.detail.groupId,
					noDisturb: e
				})
				this.getDetail()
			},
			clearChat() {
				this.$modal.confirm(`确认清除和${this.detail.groupName}的聊天记录吗?`).then(async con => {
					if (con) {
						const res = await this.$Api.chat.deleteGroup(this.detail.groupId)
						this.getDetail()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	/* #ifdef MP-WEIXIN */
	/deep/ .uni-navbar__header-btns-right{
		margin-right: 180rpx;
	}
	/* #endif */
	
	/deep/ .u-switch__node {
		background-color: #e8e8e8 !important;
	}
</style>